<template>
<div>
  <el-row>
    <el-col :span="2" style="line-height: 40px">配送中车辆:</el-col>
    <el-col :span="4">
      <el-select v-model="deliTruck" placeholder="请选择">
        <el-option
        v-for="truck of allDeliTruck" 
        :key="truck.truckId"
        :label="truck.truckNumber"
        :value="truck.truckId+','+truck.empId"></el-option>
      </el-select>
    </el-col>
    <el-col :span="3" :offset="1">
      <el-button v-if="deliTruck != '' && deliTruck != null" type="primary" icon="el-icon-truck" @click="deliFinish">配送完成</el-button>
    </el-col>
  </el-row>
  <el-table
    :data="allTruck"
    height="570"
    border
    @row-dblclick="viewDetails"
    style="width: 100%">
    <el-table-column prop="truckId" label="车辆编号"></el-table-column>
    <el-table-column prop="empName" label="司机"></el-table-column>
    <el-table-column prop="truckType" label="车辆类型"></el-table-column>
    <el-table-column prop="truckNumber" label="车牌号"></el-table-column>
    <el-table-column prop="truckState" label="车辆状态"></el-table-column>
    <el-table-column prop="stateInfo" label="状态信息"></el-table-column>
    <el-table-column prop="siteName" label="所属站点"></el-table-column>
    <el-table-column prop="endSite" label="目标站点"></el-table-column>
  </el-table>
  <el-dialog title="车辆任务派送" :visible.sync="dialogFormVisible">
    <el-row>
      <el-col :span="2" class="height40">
        车辆编号:
      </el-col>
      <el-col :span="10">
        <el-input v-model="truckForm.truckId" disabled></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        司机:
      </el-col>
      <el-col :span="10">
        <el-input v-model="truckForm.empName" disabled></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        车辆类型:
      </el-col>
      <el-col :span="10">
        <el-input v-model="truckForm.truckType" disabled></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" class="height40">
        选择目的地:
      </el-col>
      <el-col :span="9" v-if="truckForm.truckType == '短途货车'">
        <el-cascader v-model="truckForm.endSites" :options="allSite" filterable :show-all-levels="false"></el-cascader>
      </el-col>
      <el-col :span="9" v-if="truckForm.truckType == '长途货车'">
        <el-select v-model="truckForm.endSite">
          <el-option
            v-for="site in allProSite"
            :key="site.siteId"
            :label="site.siteName"
            :value="site.siteName">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" :offset="1">
        <el-radio v-model="truckForm.truckState" label="待装车" border size="small">装配待命</el-radio>
        <el-radio v-model="truckForm.truckState" label="待命" border size="small">直接发车</el-radio>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" :offset="3">
        <el-button type="primary" icon="el-icon-circle-check" @click="dispatch">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</div>
</template>

<script>
import {getTruck,updTruck} from 'network/truck.js'
import {getSite} from 'network/site.js'

let loginAccount = JSON.parse(sessionStorage.loginAccount)
//获取所有货车
let selTrucks = function(allTruck) {
  getTruck({nowSite:loginAccount.sitetb.siteName,truckState:"待命"}).then( res => {
    allTruck.splice(0)
    for(let truck of res) {
      truck.empName = truck.emps.empName
      truck.siteName = truck.emps.sitetb.siteName
      allTruck.push(truck)
    }
  }).catch(err => {
    console.log(err)
  })
}

export default {
  data() {
    return {
      dialogFormVisible: false,
      allTruck: [],
      allProSite: [], //所有外省站点
      allDeliTruck: [], //所有配送中车辆
      allSite:[], //所有省内站点
      deliTruck: '',  //选中配送中车辆
      truckForm: {
        truckId: '',
        truckType: '',
        empName: '',
        empId: 0,
        nowSite: loginAccount.sitetb.siteName,
        endSites: [],
        endSite: '',
        truckState: '待装车'
      },
    }
  },
  methods: {
    deliFinish() {
      let truckId = this.deliTruck.substring(0,this.deliTruck.indexOf(","))
      let empId = this.deliTruck.substring(this.deliTruck.indexOf(",")+1)
      updTruck({truckId:truckId,truckState:"待命",empId:empId,endSite:"0"}).then(res =>{
        //更新当前页面数据
        //查询所有货车
        selTrucks(this.allTruck)
        //查询所有配送中车辆
        getTruck({nowSite:loginAccount.sitetb.siteName}).then( res => {
          this.allDeliTruck = res
        }).catch(err => {
          console.log(err)
        })
      })
    },
    viewDetails(row) {
      this.dialogFormVisible = true
      this.truckForm.truckId = row.truckId
      this.truckForm.truckType = row.truckType
      this.truckForm.empId = row.empId
      this.truckForm.empName = row.empName
      if(this.truckForm.truckType == '长途货车') {
        this.truckForm.endSites.splice(0)
      }else{
        this.truckForm.endSite = ''
      }
    },
    dispatch() {
      if(this.truckForm.endSites.length>1) {
        this.truckForm.endSite = this.truckForm.endSites[3]
      }
      if(this.truckForm.truckState == '待命') {
        this.truckForm.nowSite = this.truckForm.endSite
        this.truckForm.endSite = ''
      }
      updTruck(this.truckForm).then(res =>  {
          if(res > 0) {
            this.$message({
              showClose: true,
              message: '调度成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            selTrucks(this.allTruck)
          }
      })
    }
  },
  mounted() {
    //查询所有货车
    selTrucks(this.allTruck)
    //查询所有配送中车辆
    getTruck({nowSite:loginAccount.sitetb.siteName,truckState:"配送中"}).then( res => {
      this.allDeliTruck = res
    }).catch(err => {
      console.log(err)
    })
    //查询所有省级站点
    getSite({siteGrade:"省"}).then( res=> {
      for(let site of res) {
        if(site.siteId != loginAccount.sitetb.areatb.citytb.proId) {
          this.allProSite.push(site)
        }
      }
    })
    //获取所有省内站点
    this.$store.state.modules.proCityArea.province.forEach((pro,index) => {
      if(pro.proName == loginAccount.sitetb.areatb.citytb.province.proName) {
        this.allSite.push({label:pro.proName,children: []})
        pro.citys.forEach((city,ind) => {
          this.allSite[0].children.push({value:city.cityName,label:city.cityName,children: []})
          city.areas.forEach((area,i) => {
            this.allSite[0].children[ind].children.push({label:area.areaName,children: []})
            area.sitetbs.forEach((site) => {
              this.allSite[0].children[ind].children[i].children.push({value:site.siteName,label:site.siteName})
            })
          })
        })
      }
    })
  } 
}
</script>

<style scoped>
.el-row{
  margin-bottom: 50px;
}
</style>
